<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src='../js/vue.js'>
  </script>
</head>

<body>
  <div id=app>
    <h2>初始值：{{message}}</h2>
    <h2>{{n}}</h2>
    <h2 v-big="n"></h2>
    <button @click="n++">按钮</button>

    <input type="text" v-fbind:value="n">

  </div>
  <script type='text/javascript'>

    //全局指令
    Vue.directive('big1', function (ele, binding) {

    })
    let app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        n: 1
      },
      directives: {
        big(element, binding) {
          //console.log(element,binding)
          element.innerText = binding.value * 10;
        },
        fbind: {
          //指令和元素绑定成功时候
          bind(element, binding) {
            element.value = binding.value;
          },
          //指令所在元素插入到页面时候
          inserted(element, binding) {
            element.focus();
          },
          //指所在的模板重新编译时候
          update(element, binding) {
            element.value = binding.value;
          }
        }
      }

    })
  </script>

</body>

</html>